<!-- 楼层详情弹窗 -->
<template>
  <Modal class="wrap-floor-modal" v-model="modalShow" footer-hide @input="data => $emit('modalinput', data)">
    <div class="wrap-floor-content">
      <div class="wrap-floor-content-left">
        <div class="floor-image-tips">
          <div class="floor-tips-build">
            <img src="@/assets/images/viewIcon/icon_lc_bt_zuo_s.png" />
            <span>{{ modalInfo.buildingData ? modalInfo.buildingData.buildingName : '' }}</span>
            <img src="@/assets/images/viewIcon/icon_lc_bt_you_s.png" />
          </div>
          <div class="floor-tips-contet">
            <span class="font48">{{ currentFloorNumber }}</span>
            <span>层</span>
          </div>
        </div>
        <div class="floor-caseder">
          <div class="floor-case">
            <div class="arrow-btn arrow-top">
              <Icon type="ios-arrow-up" size="22" :color="floorList.length < 10 ? '#678DE1' : '#fff'" @click="floorSlideTop" />
            </div>
            <div class="slider-box">
              <ul id="floorSlider">
                <li v-for="(item, index) in floorList" :key="index" :class="{ 'is-checked': index === currentFloor }" @click="handleCheckFloor(item, index)">{{ item }}</li>
              </ul>
            </div>
            <div class="arrow-btn arrow-bottom">
              <Icon type="ios-arrow-down" size="22" :color="floorList.length < 10 ? '#678DE1' : '#fff'" @click="floorSlideDown" />
            </div>
          </div>
          <div class="floot-room">
            <ul>
              <li v-for="(item, index) in roomList" :key="index" :class="{ 'item-checked': index === currentRoom }" @click="handleCheckRoom(item, index)">{{ item.name }}</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="wrap-floor-content-right" v-show="!showDetail">
        <div class="wrap-floor-title">{{ modalInfo.buildingData ? modalInfo.buildingData.buildingName : '' }}</div>
        <ul class="wrap-floor-info">
          <li v-for="(item, index) in deviceList" :key="index" :class="{ 'dis-none': item.count === 0 }">
            <div :class="{ 'wrap-floor-info-title': true, 'wrap-floor-info-spacil-title': index === 0 }">{{ item.name + `（${item.count}）` }}</div>
            <div :class="`swiper-container swiper-container${index}`" :id="`swiper${index}`" v-if="item.name !== '问题数'" :ref="`swiper${index}`">
              <div :class="`swiper-wrapper swiper-wrapper${index}`">
                <div class="swiper-slide" v-for="(itm, idx) in item.list" :key="idx">
                  <div :class="{ 'slider-imgs': true, 'slider-2imgs': index === 2 }" @click="handCheckDevice(itm, index)">
                    <img :src="active === idx ? formateCheckedImg(itm.cabinetClass) : fortmateImg(itm.cabinetClass)" v-if="index === 1" @mouseover="active = idx" @mouseout="active = null" />
                    <img
                      :src="activeSecond === idx ? sizeFormateCheckedImg(itm.cylVolumn) : sizeFormateImg(itm.cylVolumn)"
                      v-if="index === 0"
                      @mouseover="activeSecond = idx"
                      @mouseout="activeSecond = null"
                    />
                    <img :src="fortmateImg(itm.name)" v-if="index === 2" />
                  </div>
                  <div class="slider-info">
                    <img src="@/assets/images/viewIcon/icon_fj_gzgp_1.png" v-if="itm.gasControlLevel === '管制钢瓶'" />
                    <span>{{ index === 0 ? itm.gasName : index === 1 ? itm.cabinetClass : itm.name }}</span>
                  </div>
                </div>
              </div>
              <div :class="`swiper-pagination swiper-pagination${index}`" v-show="false"></div>
            </div>
            <div :class="`swiper${index} swiper-button-next`" v-if="item.list && item.list.length > 5" @click="handleNext(index)"></div>
            <div :class="`swiper${index} swiper-button-prev`" v-if="item.list && item.list.length > 5" @click="handleSliderPrev(index)"></div>
            <div v-if="item.name === '问题数'">
              <Table border :columns="columns" :data="tableData" class="number-table"></Table>
            </div>
          </li>
        </ul>
      </div>
      <div class="wrap-floor-content-detail" v-if="showDetail">
        <div class="wrap-floor-title">{{ modalInfo.buildingData ? modalInfo.buildingData.buildingName : '' }}</div>
        <div class="prev-button" @click="handlePrev">返回</div>
        <div class="detail-content">
          <div class="detail-content-left">
            <div class="model-box">
              <img :src="sizeFormateBigImg(deviceDetail.cylVolumn)" v-if="deviceDetail.cylVolumn" />
              <img :src="formateBigImg(deviceDetail.cabinetClass)" v-if="deviceDetail.cabinetClass" class="auto-img" />
              <img :src="formateBigImg(deviceDetail.name)" v-if="deviceDetail.dateRange" />
            </div>
            <div class="model-info">
              <div class="info-tips">
                <img src="@/assets/images/viewIcon/icon_lc_bt_zuo.png" style="height:16px; width: 92px" />
                <div class="info-tips-text">
                  <img src="@/assets/images/viewIcon/icon_fj_gzgp_1.png" v-if="deviceDetail.cylVolumn && deviceDetail.gasControlLevel === '管制钢瓶'" />
                  <span v-if="deviceDetail.cylVolumn">{{ deviceDetail.gasName }}</span>
                  <span v-if="deviceDetail.cabinetClass">{{ deviceDetail.cabinetClass }}</span>
                  <span v-if="deviceDetail.dateRange">{{ deviceDetail.name }}</span>
                </div>
                <img src="@/assets/images/viewIcon/icon_lc_bt_you.png" style="height:16px; width: 92px" />
              </div>
              <ul v-if="deviceDetail.cabinetClass">
                <li>
                  <div></div>
                  编号：{{ deviceDetail.cabinetNo || '' }}
                </li>
                <li>
                  <div></div>
                  存储功能：{{ deviceDetail.cabinetFunc || '' }}
                </li>
                <li>
                  <div></div>
                  柜子特性：{{ deviceDetail.cabinetFeature || '' }}
                </li>
              </ul>
            </div>
          </div>
          <div class="detail-content-right">
            <div class="info-model">
              <GlassDetail :rest="deviceDetail" v-if="detailIndex === 0" />
              <CabinetDetail v-if="detailIndex === 1" :rest="deviceDetail" />
              <ProbeDetail v-if="detailIndex === 2" :rest="deviceDetail" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </Modal>
</template>

<script>
  import utils from '@/libs/utils'
  import GlassDetail from '@/components/GlassDetail'
  import CabinetDetail from '@/components/CabinetDetail'
  import ProbeDetail from '@/components/ProbeDetail'
  import axiosModel from '@/api'

  // import detail from '@/assets/mockData/detail.json'
  export default {
    props: {
      modal: {
        default: false,
        type: Boolean
      },
      modalInfo: {
        type: Object,
        default: () => {}
      }
    },
    components: {
      GlassDetail,
      CabinetDetail,
      ProbeDetail
    },
    data () {
      return {
        modalShow: false,
        active: true,
        activeSecond: true,
        topBtnDisable: false,
        bottomBtnDisable: false,
        showDetail: false,
        detailIndex: null,
        deviceDetail: {},
        floorList: [],
        roomList: [],
        currentFloor: 0,
        currentFloorNumber: '',
        currentRoom: 0,
        deviceList: [
          {
            name: '气体钢瓶',
            count: 0,
            list: [
              {
                name: '氧气、氩气',
                number: 0
              },
              {
                name: '二氧化碳、氮气',
                number: 0
              },
              {
                name: '二氧化碳、氢气、氮气',
                number: 0
              },
              {
                name: '一氧化碳、氢气、氮气',
                number: 0
              },
              {
                name: '氮气',
                number: 0
              },
              {
                name: '氮气1',
                number: 0
              }
            ]
          },
          {
            name: '化学品存储柜',
            count: 0,
            list: [
              {
                name: '防火柜'
              },
              {
                name: '非防火柜'
              },
              {
                name: '酸碱存储柜'
              },
              {
                name: '器材柜'
              },
              {
                name: '放射源存储柜'
              },
              {
                name: '冷藏柜/冰箱'
              },
              {
                name: '毒麻品存储柜'
              },
              {
                name: '自燃/活性物质存储柜'
              },
              {
                name: '防爆柜'
              },
              {
                name: '气瓶存储柜'
              },
              {
                name: '通风试剂柜'
              },
              {
                name: '氧化剂存储柜'
              }
            ]
          },
          {
            name: '气体泄漏检测点',
            count: 0,
            list: [
              {
                name: '一氧化碳检测探头'
              },
              {
                name: '二氧化碳检测探头'
              },
              {
                name: '氢气检测探头'
              }
            ]
          },
          {
            name: '问题数',
            count: 0,
            list: [
              {
                name: '0'
              },
              {
                name: '0'
              },
              {
                name: '0'
              },
              {
                name: '0'
              }
            ]
          }
        ],
        columns: [
          {
            title: '序号',
            type: 'index',
            align: 'center'
          },
          {
            title: '问题描述',
            key: 'checkDescription',
            align: 'center'
          },
          {
            title: '检查人',
            key: 'checkerName',
            align: 'center'
          },
          {
            title: '检查时间',
            key: 'checkTime',
            align: 'center'
          },
          {
            title: '状态',
            key: 'state',
            align: 'center'
          }
        ],
        tableData: [
          {
            name: 'John Brown',
            age: 18,
            address: 'New York No. 1 Lake Park',
            date: '2016-10-03'
          },
          {
            name: 'Jim Green',
            age: 24,
            address: 'London No. 1 Lake Park',
            date: '2016-10-01'
          },
          {
            name: 'Joe Black',
            age: 30,
            address: 'Sydney No. 1 Lake Park',
            date: '2016-10-02'
          }
        ]
      }
    },
    watch: {
      modal (newVal) {
        this.modalShow = newVal
      },
      modalInfo (newVal) {
        this.showDetail = false
        this.currentFloor = 0
        this.getFloorDetail(newVal.floorNum, null, true)
      }
    },
    computed: {},
    created () {},
    mounted () {},
    methods: {
      handleNext (index) {
        this.$refs[`swiper${index}`][0].swiper.slideNext()
      },
      handleSliderPrev (index) {
        this.$refs[`swiper${index}`][0].swiper.slidePrev()
      },
      floorSlideTop () {
        // if (this.floorList.length < 10) {
        //   return
        // }
        let dom = document.getElementById('floorSlider')
        let obj = getComputedStyle(dom, null)
        if (obj['top'] === '0px') {
          return
        } else {
          let currentTop = Number(obj['top'].split('px')[0])
          document.getElementById('floorSlider').style.top = `${currentTop + 48}px`
        }
      },
      floorSlideDown () {
        // if (this.floorList.length < 10) {
        //   return
        // }
        let dom = document.getElementById('floorSlider')
        let dom1 = document.getElementsByClassName('slider-box')[0]
        let obj = getComputedStyle(dom, null)
        let maxNumber = this.floorList.length * 48 - dom1.clientHeight
        console.log(maxNumber)
        console.log(obj['top'])
        if (maxNumber + Number(obj['top'].split('px')[0]) < 0) {
          return
        } else {
          let currentTop = Number(obj['top'].split('px')[0])
          document.getElementById('floorSlider').style.top = `${currentTop - 48}px`
        }
      },
      handleCheckFloor (item, index) {
        this.currentFloor = index
        this.currentFloorNumber = item
        this.currentRoom = 0
        this.showDetail = false
        this.getFloorDetail(item, null)
      },
      handleCheckRoom (item, index) {
        this.currentRoom = index
        this.showDetail = false
        this.getFloorDetail(this.currentFloor + 1, item.id)
      },
      fortmateImg (param) {
        return utils.formateImg(param)
      },
      formateBigImg (param) {
        return utils.formateBigImg(param)
      },
      formateCheckedImg (param) {
        return utils.formateCheckedImg(param)
      },
      sizeFormateImg (number) {
        let imgUrl = ''
        let count = Number(number)
        if (count < 10) {
          imgUrl = require('@/assets/images/viewIcon/icon_fj_qtgp_10.png')
        } else if (count >= 10 && count <= 40) {
          imgUrl = require('@/assets/images/viewIcon/icon_fj_qtgp_10-40.png')
        } else {
          imgUrl = require('@/assets/images/viewIcon/icon_fj_qtgp_40.png')
        }
        return imgUrl
      },
      sizeFormateBigImg (number) {
        let imgUrl = ''
        let count = Number(number)
        if (count < 10) {
          imgUrl = require('@/assets/images/modalDetail/icon_tc_qtgp_10x.png')
        } else if (count >= 10 && count <= 40) {
          imgUrl = require('@/assets/images/modalDetail/icon_tc_qtgp_10-40.png')
        } else {
          imgUrl = require('@/assets/images/modalDetail/icon_tc_qtgp_40s.png')
        }
        return imgUrl
      },
      sizeFormate (number) {
        let size = ''
        let count = Number(number)
        if (count < 10) {
          size = 'height: 250px; width: 61px'
        } else if (count >= 10 && count <= 40) {
          size = 'height: 322px; width: 61px'
        } else {
          size = 'height: 352px; width: 61px'
        }
        return size
      },
      sizeFormateCheckedImg (number) {
        let imgUrl = ''
        let count = Number(number)
        if (count < 10) {
          imgUrl = require('@/assets/images/viewIcon/icon_fj_qtgp_10_pre.png')
        } else if (count >= 10 && count <= 40) {
          imgUrl = require('@/assets/images/viewIcon/icon_fj_qtgp_10-40_pre.png')
        } else {
          imgUrl = require('@/assets/images/viewIcon/icon_fj_qtgp_40_pre.png')
        }
        return imgUrl
      },
      handCheckDevice (param, index) {
        this.detailIndex = index
        this.deviceDetail = Object.assign({}, { ...param })
        this.showDetail = true
      },
      handlePrev () {
        this.showDetail = false
      },
      initSwiper () {
        this.deviceList.map((item, index) => {
          new Swiper(`#swiper${index}`, {
            slidesPerView: index === 2 ? 3 : 5,
            spaceBetween: 5,
            observer: true,
            observeParents: true,
            pagination: {
              el: `.swiper-pagination${index}`,
              clickable: true
            },
            // pagination: '.swiper-pagination',
            navigation: {
              nextEl: `.swiper${index} .swiper-button-next`,
              prevEl: `.swiper${index} .swiper-button-prev`
            },
            onSlideChangeEnd: function (swiper) {
              swiper.update()
              swiper.reLoop()
            }
          })
        })
      },
      async getFloorDetail (floor, roomId, checkFloor) {
        const { data } = await axiosModel.buildingQueryController.getFloorDetail({
          buildingId: this.modalInfo.buildingData.buildingId,
          levelAt: floor,
          labRoomId: roomId
        })
        // const { data } = detail
        const { roomlist, floorList, chemical, gas, check, gasLeak } = data.rows.dataList
        this.roomList = roomlist
        this.floorList = floorList
        if (checkFloor) {
          this.currentFloorNumber = floor
          floorList.forEach((item, index) => {
            if (item == floor) {
              this.currentFloor = index
            }
          })
        }
        this.deviceList[0].count = gas.total
        this.deviceList[0].list = gas.gasItems
        this.deviceList[1].count = chemical.total
        this.deviceList[1].list = chemical.chemicalItems
        this.deviceList[2].count = gasLeak.total
        // this.deviceList[2].info = {
        //   dateRange: gasLeak.dateRange,
        //   leakPointItems: gasLeak.leakPointItems,
        //   timeRange: gasLeak.timeRange
        // }
        this.deviceList[2].list = this.deviceList[2].list.map(item => {
          let leakPointItems = gasLeak.leakPointItems.filter(itm => {
            return itm.monitorName === item.name
          })
          return {
            ...item,
            dateRange: gasLeak.dateRange,
            timeRange: gasLeak.timeRange,
            leakPointItems: leakPointItems.length ? leakPointItems[0].yAxis : []
          }
        })
        this.deviceList[3].count = check.total
        this.deviceList[3].list = check.checkItems
        this.tableData = check.checkItems
        let self = this
        setTimeout(() => {
          self.initSwiper()
        }, 100)
      }
    }
  }
</script>
<style lang="less" scoped>
  span:focus {
    outline: none;
  }
  .wrap-floor-modal {
    position: relative;
    /deep/ .ivu-modal {
      width: 82% !important;
      height: 85%;
      top: 0;
      background: url('~@/assets/images/viewIcon/icon_fj_bg.png') no-repeat;
      background-size: 100% 100%;
    }
    /deep/ .ivu-modal-wrap {
      display: flex;
      align-items: center;
      background: rgba(0, 0, 0, 0.7);
    }
    /deep/ .ivu-modal-content {
      height: 100%;
      background: none;
    }
    /deep/ .ivu-modal-close {
      right: 20px;
      top: 40px;
      .ivu-icon-ios-close {
        color: #fff;
        font-size: 46px;
      }
    }
    /deep/ .ivu-modal-body {
      height: 100%;
      padding: 66px 15px 35px 15px;
    }
    .wrap-floor-content {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: flex-start;
      padding-left: 28px;
      justify-content: space-between;
      &-left {
        width: 20%;
        height: 100%;
        background: linear-gradient(180deg, rgba(43, 114, 247, 0.15) 0%, rgba(43, 114, 247, 0.4) 100%);
        box-shadow: 0px 0px 36px 12px rgba(43, 114, 247, 0.4);
        border: 1px solid #7fdff7;
        .floor-image-tips {
          width: 100%;
          height: 40%;
          padding: 16% 0;
          background: url('~@/assets/images/viewIcon/icon_fj_lc_bg_s.png') no-repeat center;
          background-size: 80%;
          .floor-tips-build {
            display: flex;
            align-items: center;
            justify-content: center;
            span {
              padding: 0 10px;
              font-size: 16px;
              font-weight: 500;
              color: #ffffff;
            }
          }
          .floor-tips-contet {
            margin-top: 16%;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            span {
              color: #fff;
              font-size: 14px;
            }
            .font48 {
              font-size: 80px;
              line-height: 70px;
              font-weight: 600;
              color: #ffffff;
            }
          }
        }
        .floor-caseder {
          height: 60%;
          width: 100%;
          border-top: 1px solid #678de1;
          display: flex;
          .floor-case {
            width: 30%;
            height: 100%;
            border-right: 1px solid #678de1;
            display: flex;
            flex-direction: column;
            .slider-box {
              position: relative;
              overflow: hidden;
              width: 100%;
              height: 476px;
              #floorSlider {
                position: absolute;
                height: auto;
                width: 100%;
                top: 0;
                left: 0;
              }
            }
            .arrow-btn {
              width: 100%;
              height: 24px;
              display: flex;
              align-items: center;
              justify-content: center;
              i {
                cursor: pointer;
              }
            }
            .arrow-top {
              border-bottom: 1px solid #678de1;
            }
            .arrow-bottom {
              border-top: 1px solid #678de1;
            }
            ul {
              height: calc(100% - 48px);
              display: flex;
              flex-direction: column;
              li {
                cursor: pointer;
                height: 32px;
                margin: 8px 0;
                font-size: 16px;
                font-weight: 400;
                display: flex;
                justify-content: center;
                align-items: center;
                color: #678de1;
              }
              .is-checked {
                color: #fff;
                background: #7fdff7;
              }
            }
          }
          .floot-room {
            width: 70%;
            height: 100%;
            padding: 5%;
            overflow: auto;
            ul {
              width: 100%;
              height: 100%;
              display: flex;
              flex-wrap: wrap;
              justify-content: space-between;
              align-content: flex-start;
              li {
                cursor: pointer;
                width: 48%;
                height: 29px;
                margin: 10px 0;
                text-align: center;
                font-size: 14px;
                font-weight: 400;
                color: #678de1;
                display: flex;
                flex-direction: column;
                justify-content: center;
                border: 1px solid #678de1;
              }
              .item-checked {
                color: #fff;
                border: 2px solid #7fdff7;
              }
            }
          }
        }
      }
      &-right {
        width: 78%;
        height: 100%;
        padding: 94px 0px 0 0;
        position: relative;
        overflow: hidden;
        .wrap-floor-title {
          display: flex;
          justify-content: center;
          align-items: center;
          position: absolute;
          width: 92%;
          height: 8%;
          top: -4px;
          font-size: 30px;
          font-weight: 500;
          color: #ffffff;
          line-height: 42px;
        }
        .wrap-floor-info {
          height: 100%;
          overflow-y: auto;
          li {
            position: relative;
            height: 54%;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
          }
          &-title {
            margin-left: 36px;
            height: 36px;
            width: 92%;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            background: url('~@/assets/images/viewIcon/icon_lc_tc_qtgp_bg.png') no-repeat;
            background-size: 96% 100%;
            text-indent: 15px;
            font-size: 14px;
            font-weight: 500;
            color: #ffffff;
            line-height: 20px;
          }
          &-spacil-title {
            background: url('~@/assets/images/viewIcon/icon_fj_qtgp_bg.png') no-repeat;
            background-size: 96% 100%;
          }
          .swiper-container {
            height: 100%;
            width: 90%;
            margin: 20px auto 20px 40px;
            overflow: hidden;
          }
          .swiper-button-prev {
            left: 0;
            width: 50px;
            height: 50px;
            background: url('~@/assets/images/viewIcon/icon_fj_lc_qtgp_jiantou_zuopre.png');
          }
          .swiper-button-next {
            right: 3%;
            width: 50px;
            height: 50px;
            background: url('~@/assets/images/viewIcon/icon_fj_qtgp_jiantou_you.png');
          }
          .swiper-button-next:after,
          .swiper-container-rtl .swiper-button-prev:after {
            content: '';
          }
          .swiper-button-prev:after,
          .swiper-container-rtl .swiper-button-next:after {
            content: '';
          }
          .slider-info {
            padding: 10px 0 5px 0;
            display: flex;
            align-items: center;
            img {
              padding: 0 5px;
            }
          }
          .number-table {
            margin: 4% 10%;
          }
        }
      }
      &-detail {
        width: 78%;
        height: 100%;
        position: relative;
        overflow: hidden;
        .wrap-floor-title {
          display: flex;
          justify-content: center;
          align-items: center;
          position: absolute;
          width: 92%;
          height: 8%;
          top: -4px;
          font-size: 30px;
          font-weight: 500;
          color: #ffffff;
          line-height: 42px;
        }
        .prev-button {
          cursor: pointer;
          position: absolute;
          top: 2%;
          left: 1%;
          width: 95px;
          height: 40px;
          background: rgba(18, 58, 155, 0.6);
          border: 1px solid #7fdff7;
          color: #fff;
          text-align: center;
          line-height: 40px;
          font-size: 14px;
        }
        .detail-content {
          width: 100%;
          height: 100%;
          padding: 100px 90px 0 20px;
          display: flex;
          justify-content: space-between;
          &-left {
            height: 100%;
            width: 32%;
            .model-info {
              width: 100%;
              height: 20%;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              .info-tips {
                display: flex;
                justify-content: center;
                align-items: center;
                > div {
                  color: #fff;
                  padding: 0 15px;
                  display: flex;
                  align-items: center;
                  font-size: 16px;
                  font-weight: 500;
                }
                img {
                  padding-right: 5px;
                }
              }
              ul {
                display: flex;
                width: 100%;
                flex-wrap: wrap;
                justify-content: space-between;
                li {
                  margin: 10px 0;
                  font-weight: 500;
                  color: #fff;
                  font-size: 14px;
                  display: flex;
                  align-items: center;
                  div {
                    margin: 0 5px;
                    background: #fff;
                    height: 6px;
                    width: 6px;
                    border-radius: 50%;
                  }
                }
              }
            }
            .model-box {
              height: 80%;
              width: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              background: url('~@/assets/images/viewIcon/icon_tc_jctt_c02bg.png') no-repeat bottom;
              background-size: 100%;
            }
          }
          &-right {
            height: 100%;
            width: 64%;
            display: flex;
            justify-content: center;
            align-items: center;
            .info-model {
              width: 100%;
              height: 100%;
              padding: 60px 70px 40px 70px;
              background: url('~@/assets/images/viewIcon/icon_lc_tc_lcg_hxptj_bg.png') no-repeat;
              background-size: 100% 100%;
            }
          }
        }
      }
    }
  }
  .dis-none {
    display: none !important;
  }
  .swiper-slide {
    text-align: center;
    font-size: 14px;
    background: #fff;
    background: rgba(0, 0, 0, 0);
    color: #fff;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }
  .slider-imgs {
    height: calc(100% - 40px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    img {
      width: 100%;
      height: auto;
    }
  }
  /deep/ .ivu-table {
    background: none;
  }
  /deep/ .ivu-table-header th {
    color: #fff;
    background: rgba(18, 58, 155, 0.6);
  }
  /deep/ .ivu-table-wrapper {
    border: 1px solid #678de1;
    border-bottom: 0;
    border-right: 0;
  }
  /deep/ .ivu-table td {
    color: #fff;
    background: rgba(0, 0, 0, 0);
    border: 1px solid #678de1;
  }
  /deep/ .ivu-table:before {
    background: none;
  }
  /deep/ .ivu-table:after {
    display: none;
    background: none;
  }
  /deep/ .ivu-table th {
    border-bottom: 1px solid #678de1;
  }
  /deep/ .ivu-table-border th {
    border-right: 1px solid #678de1;
  }
  ::-webkit-scrollbar {
    width: 6px;
    height: 3px;
  }
  // 滚动条里面小方块
  ::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background: #7fdff7;
  }

  //滚动条里面轨道
  ::-webkit-scrollbar-track {
    border-radius: 6px;
    background: #3569cc;
  }

  ::-webkit-scrollbar-resizer,
  ::-webkit-resizer {
    background: #153461;
  }

  ::-webkit-scrollbar-corner {
    display: none;
  }

  /deep/ .ivu-table-tip table {
    width: auto !important;
  }

  @media screen and (max-height: 860px) {
    .slider-imgs {
      overflow: hidden;
      img {
        width: auto;
        height: 100%;
      }
    }
    .prev-button {
      width: 68px !important;
      height: 32px !important;
      line-height: 32px !important;
    }
    .info-tips-text {
      font-size: 14px !important;
      span {
        white-space: nowrap;
      }
    }
    .slider-2imgs {
      img {
        height: 100%;
        width: auto;
      }
    }
    .model-box {
      img {
        height: 60% !important;
        width: auto;
      }
    }
    .info-tips {
      > img {
        height: 14px !important;
        width: 42px !important;
      }
    }
    .model-info ul {
      width: 100% !important;
      li {
        font-size: 12px !important;
      }
    }
    /deep/ .ivu-modal-body {
      padding: 52px 15px 35px 15px !important;
    }
    .info-model {
      padding: 30px 50px 20px 50px !important;
    }
    .wrap-floor-title {
      font-size: 24px !important;
      top: -6px !important;
    }
    .floor-tips-build {
      span {
        font-size: 14px !important;
      }
    }
    .font48 {
      font-size: 60px !important;
      line-height: 55px !important;
    }
    .detail-content {
      padding: 10% 5% 0 2% !important;
    }
    .floor-image-tips {
      padding: 18% 0 !important;
    }
    .floor-tips-contet {
      margin-top: 11% !important;
    }
    .auto-img {
      width: auto;
      height: 80%;
    }
    // .wrap-floor-content-right {
    //   width: calc(100% - 280px) !important;
    // }
    // .wrap-floor-content-detail {
    //   width: calc(100% - 280px) !important;
    // }
  }
</style>
